<?php
    if (!isset($category_id1)) $category_id1="";
    if (!isset($category_id2)) $category_id2="";
    if (!isset($category_id3)) $category_id3="";
?>
<div class="row">
    <div class="col-xs-2" style="padding-left: 20px">
        <select style="" name="[one-name]" id="one-item" class="chosen-select form-control"
                onchange="changeOne()"></select>
    </div>

    <div class="col-xs-2" id="two-container" style="padding-left: 20px">
        <select name="[two-name]" id="two-item" class="form-control" onchange="changeTwo()"></select>
    </div>

    <div class="col-xs-2" id="three-container" style="padding-left: 20px;display: none;">
        <select class="form-control" name="[three-name]" id="three-item"></select>
    </div>
</div>

<script src="__PUBLIC__/vendors/select2/js/select2.min.js"></script>
<script type="application/javascript">
    //一级分类选择器
    var oneSelector = $("#one-item");
    //二级分类选择器
    var twoSelector = $("#two-item");
    var twoContainer = $("#two-container");
    //三级分类选择器
    var threeSelector = $("#three-item");
    var threeContainer = $("#three-container");

    //更改一级分类
    function changeOne()
    {
        //清空三级分类
        threeSelector.empty();

        if (oneSelector.val() != '')
        {
            //threeContainer.hide();
            $.ajax({
                url: "{:url('Utils/queryCategory')}",
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    parent_id: oneSelector.val()
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success: function (data, textStatus, jqXHR) {

                    //显示市区选择器
                    twoContainer.show();

                    twoSelector.empty();

                    twoSelector.append("<option selected value=''>" + "请选择" + "</option>");

                    for (var i = 0; i < data.length; i++) {
                        if (data[i].id == "{$category_id2}") {
                            twoSelector.append("<option selected value='" + data[i].id + "'>" + data[i].title + "</option>");
                        } else {
                            twoSelector.append("<option value='" + data[i].id + "'>" + data[i].title + "</option>");
                        }
                    }
                    if (twoSelector.val() != "") {
                        changeTwo();
                    }
                },
                error: function (xhr, textStatus)
                {
                },
                complete: function ()
                {
                }
            })
        }
        else
        {
            //twoContainer.hide();
            //threeContainer.hide();
        }
    }

    function changeTwo() {
        return;
        if (twoSelector.val() != '')
        {
            $.ajax({
                url: "{:url('Utils/queryCategory')}",
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    parent_id: twoSelector.val()
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success: function (data, textStatus, jqXHR) {

                    threeContainer.show();
                    threeSelector.empty();
                    threeSelector.append("<option selected value=''>" + "请选择" + "</option>");
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].id == "{$category_id3}") {
                            threeSelector.append("<option selected value='" + data[i].id + "'>" + data[i].title + "</option>");
                        } else {
                            threeSelector.append("<option value='" + data[i].id + "'>" + data[i].title + "</option>");
                        }
                    }

                }
            })
        } else {
            //threeContainer.hide();
        }
    }
    $(document).ready(function () {
        $.ajax({
            url: "{:url('Utils/queryCategory')}",
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                parent_id: '0'
            },
            timeout: 5000,    //超时时间
            dataType: 'json',
            success: function (data, textStatus, jqXHR) {

                oneSelector.empty();
                oneSelector.append("<option selected value=''>" + "请选择" + "</option>");
                for (var i = 0; i < data.length; i++) {
                    if (data[i].id == "{$category_id1}") {
                        oneSelector.append("<option selected value='" + data[i].id + "'>" + data[i].title + "</option>");
                    } else {
                        oneSelector.append("<option value='" + data[i].id + "'>" + data[i].title + "</option>");
                    }

                }
                if (oneSelector.val() != "") {
                    changeOne();
                }
            }
        });
    });

    $(function () {
        $("#one-item").select2({
            placeholder: "选择一级分类",
            allowClear: true,
            width: "100%"
        });

        $("#two-item").select2({
            placeholder: "选择二级分类",
            allowClear: true,
            width: "100%"
        });

        $("#three-item").select2({
            placeholder: "选择三级分类",
            allowClear: true,
            width: "100%"
        });
    });
</script>